<template>
  <div class="cart-conter">

    <!-- <div class="show">
      <div car_bgimg>
        <img src="http://yanxuan.nosdn.127.net/3a6c77d8463d8675f4a0a0c80dbe4391.png" alt="">
        <div>去添点什么吧</div>
      </div>
    </div> -->


    <div class="total">
      <div class="cart">
        <!-- 全球换购 -->
        <div class="top">
          <div class="head flex">
            <span class="headleft">全场换购</span>

            <div class="headright">
              <span class="title">已满0.01元，可选择十件商品换购</span>
              <span class="icon">
                <a href="javascript;;" style="color:red"> 去换购 ></a>
              </span>
            </div>
          </div>
          <!-- 中间轮播图 -->
          <ul>
            <van-swipe :loop="false" :width="230">
              <van-swipe-item>
                <li class="exchange_li">
                  <img class="exchange_bgimg"
                    src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146"
                    alt="">
                  <div class="exchange_smbox">
                    <span class="exchange_text" s>江南特产，西湖藕粉 原味 20克*15袋</span>
                    <span class="exchange_title">原味藕粉 20克*15袋</span>
                    <div>换购价 <span style="color: #fa2639; font-size: 16px; font-weight: bold;">20.8</span> <span
                        style="color: #e2e2e2; text-decoration: line-through;">25</span>
                      <img src="https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png" alt="">
                    </div>
                  </div>
                </li>
              </van-swipe-item>
              <van-swipe-item>
                <li class="exchange_li">
                  <img class="exchange_bgimg"
                    src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146"
                    alt="">
                  <div class="exchange_smbox">
                    <span class="exchange_text" s>江南特产，西湖藕粉 原味 20克*15袋</span>
                    <span class="exchange_title">原味藕粉 20克*15袋</span>
                    <div>换购价 <span style="color: #fa2639; font-size: 16px; font-weight: bold;">20.8</span> <span
                        style="color: #e2e2e2; text-decoration: line-through;">25</span>
                      <img src="https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png" alt="">
                    </div>
                  </div>

                </li>
              </van-swipe-item>
              <van-swipe-item>
                <li class="exchange_li">
                  <img class="exchange_bgimg"
                    src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146"
                    alt="">
                  <div class="exchange_smbox">
                    <span class="exchange_text" s>江南特产，西湖藕粉 原味 20克*15袋</span>
                    <span class="exchange_title">原味藕粉 20克*15袋</span>
                    <div>换购价 <span style="color: #fa2639; font-size: 16px; font-weight: bold;">20.8</span> <span
                        style="color: #e2e2e2; text-decoration: line-through;">25</span>
                      <img src="https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png" alt="">
                    </div>
                  </div>

                </li>
              </van-swipe-item>
              <van-swipe-item>
                <li class="exchange_li">
                  <img class="exchange_bgimg"
                    src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146"
                    alt="">
                  <div class="exchange_smbox">
                    <span class="exchange_text" s>江南特产，西湖藕粉 原味 20克*15袋</span>
                    <span class="exchange_title">原味藕粉 20克*15袋</span>
                    <div>换购价 <span style="color: #fa2639; font-size: 16px; font-weight: bold;">20.8</span> <span
                        style="color: #e2e2e2; text-decoration: line-through;">25</span>
                      <img src="https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png" alt="">
                    </div>
                  </div>

                </li>
              </van-swipe-item>
            </van-swipe>
          </ul>
        </div>
      </div>
      <!-- 中间商品 -->
      <div class="body">
        <div class="bodytop">
          <div class="c-icon">
            <van-checkbox v-model="checkedAll" checked-color="red" style="margin-left:10px;">99元包邮</van-checkbox>
          </div>
          <div class="bodyright">
            <span class="bodytitle">已满99元包邮</span>
            <span class="icon">
              <a href="javascripy;;" style="color: red;"> 去逛逛 ></a>
            </span>
          </div>
        </div>
        <div>
          <van-checkbox-group v-model="checked" ref="checkboxGroup">
            <van-swipe-cell>
              <div class="swipe_container flex">
                <van-checkbox name="a" checked-color="red" style="margin-left: 10px;"> </van-checkbox>
                <div class="check_right">

                  <van-card price="2.00" origin-price="10.00" title="蛋香源于鲜鸡蛋含量≥40%，港式鸡蛋仔" class="goods-card"
                    thumb="https://yanxuan-item.nosdn.127.net/a1394e6a2f2b2b1181559117c164838c.png?imageView&quality=35&thumbnail=146x146">
                    <template #tags>
                      <van-button size="mini">2瓶囤货装</van-button>
                    </template>
                    <template #footer>
                      <van-button v-show="isNum" size="mini" style="border-radius: 50%;"
                        @click="isNum = false">x1</van-button>
                      <van-stepper v-show="!isNum" v-model="value" theme="round" button-size="22" disable-input />
                    </template>
                  </van-card>
                </div>
              </div>
              <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
              </template>
            </van-swipe-cell>
          </van-checkbox-group>
        </div>
      </div>
    </div>
    <div class="jiesuan">
      <van-submit-bar class="submit" :price="3050" button-text="提交订单" >
        <van-checkbox v-model="ischecked">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持配送, <span>修改地址</span>
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
const value = ref(1)
const checked = ref([])
const ischecked = ref(false)
const checkedAll = ref(false)
const isNum = ref(false)


const qeuding = () => {
  show.value = false
}
</script>

<style scoped lang="less">
.flex {
  display: flex;
}

.delete-button{
  width: 56px;
  height: 85px;
}
.flex-c {
  display: flex;
  flex-direction: column;
}
.submit{
  position: fixed;
  bottom: 50px;
}
.swipe_container {
  align-items: center;
  justify-content: space-around;
}

.total {
  padding-top: 2px;
  width: 375px;
  min-height: 667px;
  background-color: #eee;
}

.box1 {
  background-color: aqua;
  width: 33px;
}

* {
  margin: 0;
  padding: 0;
}

.cart {
  padding: 5px;
  margin: 5px;
  background-color: #fff;
  margin-right: 5px;
  border-radius: 15px;

}

.bottom {
  align-items: center;
}

.exchange_li {
  width: 215px;
  margin-right: 10px;
  height: 70px;
  background: #fafafa;
  border-radius: 10px;
  display: flex;

  .exchange_bgimg {
    width: 70px;
    height: 70px;
    background: #f4f4f4;
    margin-right: 10px;
    border-radius: 10px;

  }

  .exchange_smbox {
    width: 140px;
    height: 70px;
    font-size: 12px;
    display: flex;
    flex-direction: column;

    .exchange_text {
      width: 140px;
      height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .exchange_title {
      height: 30px;
      line-height: 30px;
    }

    div {
      display: flex;
      justify-content: space-between;
      color: #fab6bb;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}


.goods-card {
  background: #fff;
  width: 325px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head {
  line-height: 49px;
  border-radius: 25%;
  padding: 0 10px;
  justify-content: space-between;
  border-radius: 25px;

  .headleft {
    font-size: 15px;
    font-weight: 550;
  }

  .headright {
    font-size: 13px;
    text-align: right;
  }

}

.body {
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
  padding: 5px;
  background-color: #fff;
  // padding-left: 5px;
  border-radius: 15px;

  .bodytop {
    // margin-left: 5px;
    line-height: 49px;
    display: flex;
    position: relative;
    justify-content: space-between;

    .c-icon {
      // text-align: center;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 550;

    }

    .bodyright {
      font-size: 13px;
      // padding: 0
    }

    .icon {
      color: red;
    }
  }
}
</style>